﻿<div class="demo-section">
    <div class="k-block" style="padding: 20px">
        <div class="k-block k-info-colored">
            <strong>Note: </strong>Please fill out all of the fields in this form.
        </div>
        <div>
            <dl>
                <dt>
                    <label for="companyName">Company Name:</label>
                </dt>
                <dd>
                    <input id="companyName" type="text" data-bind="value: Customer.CompanyName" class="k-textbox" />
                </dd>
                <dt>
                    <label for="contactName">Contact:</label>
                </dt>
                <dd>
                    <input id="contactName" type="text" data-bind="value: Customer.ContactName" class="k-textbox" />
                </dd>
                <dt>
                    <label for="title">Title:</label>
                </dt>
                <dd>
                    <input id="title" type="text" data-bind="value: Customer.ContactTitle" class="k-textbox" />
                </dd>
                <dt>
                    <label for="address">Address:</label>
                </dt>
                <dd>
                    <input id="address" type="text" data-bind="value: Customer.Address" class="k-textbox" />
                </dd>
                <dt>
                    <label for="city">City:</label>
                </dt>
                <dd>
                    <input id="city" type="text" data-bind="value: Customer.City" class="k-textbox" />
                </dd>
                <dt>
                    <label for="zip">Zip:</label>
                </dt>
                <dd>
                    <input id="zip" type="text" data-bind="value: Customer.PostalCode" class="k-textbox" />
                </dd>
                <dt>
                    <label for="country">Country:</label>
                </dt>
                <dd>
                    <input id="country" type="text" data-bind="value: Customer.Country" class="k-textbox" />
                </dd>
                <dt>
                    <label for="phone">Phone:</label>
                </dt>
                <dd>
                    <input id="phone" type="text" data-bind="value: Customer.Phone" class="k-textbox" />
                </dd>
                <dt>
                    <label for="fax">Fax:</label>
                </dt>
                <dd>
                    <input id="fax" type="text" data-bind="value: Customer.Fax" class="k-textbox" />
                </dd>
            </dl>

            <button data-role="button" data-bind="click: saveCustomer" data-sprite-css-class="k-icon k-i-tick">Save</button>
            <button data-role="button" data-bind="click: cancel">Cancel</button>

            <style scoped>
                dd {
                    margin: 0px 0px 20px 0px;
                    width: 100%;
                }

                label {
                    font-size: small;
                    font-weight: normal;
                }

                .k-textbox { width: 100%; }

                .k-info-colored {
                    margin: 10px;
                    padding: 10px;
                }
            </style>

        </div>
    </div>
</div>